<template>
  <div style="height: 100%">
    <not-data v-if="userId == null || friends === 0 || followList.length === 0" :tip="tip" style="height: auto;"></not-data>
    <dynamic-list
      v-else
      style="overflow: hidden; height: 100%;"
      ref="dynamicList"
      @refresh="_getFollowDynamic(0)"
      @scroll="scroll"
      :list="followList"
      :tip="tip"
      :pullDownRefresh="true"
      :pullUpLoad="true"
      @onPullingDown="onPullingDown"
      @onPullingUp="onPullingUp">
    </dynamic-list>
    <div v-if="userId == null" style="text-align: center;">
      <router-link class="please-login" to="/login" tag="p">去登录</router-link>
    </div>
  </div>
</template>

<script>
import axios from '@/api/axiosApi'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX } from '@/api/config'

import dynamicList from '@/pages/meiTu/dynamicList/dynamicList'
import notData from '@/components/not-data/not-data'

export default {
  data() {
    return {
      userId: null,
      friends: 0,
      tip: '你没还有关注的人<br>赶快去加好友吧',
      followList: []
    }
  },
  components: {
    dynamicList, notData
  },
  created() {
    this.pageStartNum = 999
    this.pageEndNum = 1   // 预留位置，以后做显示数量控制
    this.pageSize = 5
    this.userId = localUser.get('id')
    if (this.userId != null) {
      this._getFollows()
    } else {
      this.tip = '您还没有登录哦~'
    }
  },
  methods: {
    _getFollows() {
      axios.get(this, '/v1/follows', {
        follower: this.userId
      }, (data) => {
        this.friends = data.length
        this.tip = '你没还有关注的人<br>赶快去加好友吧'
        if (data.length > 0) {
          this._getFollowDynamic(0)
        }
      })
    },
    _getFollowDynamic(pageNum) {
      const _self = this
      axios.get(_self, '/v1/dynamic', {
        pageSize: _self.pageSize,
        pageNum: pageNum,
        follow: 1,
        curUserId: this.userId
      }, (data) => {
        if (data.length === 0) {
          if (pageNum > 0) {
            if (_self.$refs.dynamicList) {
              _self.$refs.dynamicList.$refs.scroll.hiddenPullUpLoad()
            }
          } else {
            _self.pageStartNum = 0
            _self.followList = []
            _self.tip = '很遗憾，你关注的人没有发过动态'
            if (_self.$refs.dynamicList) {
              _self.$refs.dynamicList.$refs.scroll.hiddenPullDown()
            }
          }
          return
        }
        let temp = []
        data.forEach(item => {
          let tmpHeadUrl = defaultAvatar
          if (item.headUrl) {
            if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
              tmpHeadUrl = item.headUrl + '-bheader'
            } else {
              tmpHeadUrl = item.headUrl
            }
          }
          temp.push({
            user: {
              id: item.publisher,
              nickname: item.nickname,
              headUrl: tmpHeadUrl,
              signature: item.signature || '',
              local: parseInt(item.local)
            },
            product: {
              id: item.productId,
              thumblUrl: item.thumbUrl,
              name: item.name,
              address: item.address,
              type: item.type
            },
            dynamic: {
              id: item.id,
              content: item.content,
              atlas: item.atlas ? item.atlas.split(';') : '',
              publishAddress: item.publishAddress,
              tags: item.tagNames ? item.tagNames.split(';') : '',
              tagIds: item.tagIds ? item.tagIds.split(';') : '',
              latitude: item.publishLatitude,
              longitude: item.publishLongitude
            },
            other: {
              collectionType: item.collection !== 0,
              starType: item.star !== 0,
              collectionNum: item.collectionSum,
              starNum: item.starSum,
              // shareNum: item.shareCount,
              commentNum: item.commentCount,
              followStatus: item.follower === 'NO' ? 0 : 1,
              friend: item.friend
            }
          })
        })
        // 第一次加载
        if (pageNum === 0 && _self.pageStartNum === 999) {
          _self.followList = temp
          _self.pageStartNum = 0
        }
        // 上拉刷新
        if (pageNum <= _self.pageStartNum) {
          _self.followList = temp
          _self.pageStartNum = pageNum
          _self.pageEndNum = 1
        }
        // 下拉加载
        if (pageNum > _self.pageEndNum) {
          _self.followList = _self.followList.concat(temp)
          _self.pageEndNum = pageNum
        }
      })
    },
    scroll(position, directionY) {
      this.$emit('scroll', position, directionY)
    },
    onPullingUp() {
      this._getFollowDynamic(this.pageEndNum + 1)
    },
    onPullingDown() {
      let pageSize = 0
      if (this.pageStartNum > 0) {
        pageSize = this.pageStartNum - 1
      }
      this._getFollowDynamic(pageSize)
    }
  },
  watch: {
    '$route'(to, from) {
      if (to.name === 'MeiTu') {
        this.userId = localUser.get('id')
        if (this.userId == null) {
          this.tip = '您还没有登录哦~'
        } else {
          if (from.name === 'DynamicDesc') {
            this._getFollows()
          }
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.please-login
  width 120px
  height 35px
  line-height 35px
  color #fff
  border-radius 4px
  background $color-level
  text-align center
  display inline-block
  margin 0 auto
  margin-top 180px
.dynamic-list
  padding 12px 9px
</style>

